<template>
  <div>
    <RadioGroup v-model="iccid">
      <Cell  v-for="item in cardList" :key="item.iccid" :title="item.iccid" clickable @click="iccid = item.iccid">
        <template #right-icon>
          <Radio :name="item.iccid" />
        </template>
      </Cell>
      <Empty v-if="cardList.length===0" description="暂无可用sim卡，请前往添加" />
    </RadioGroup>
    <div style="margin:40px 0;padding: 0 20px" v-if="cardList.length!==0">
      <van-button type="primary" :disabled="!Boolean(iccid)" style="width: 100%" @click="goOut">前往认证</van-button>
      <div class="tips">
        <span> 1、选择要实名认证的SIM卡 </span>
        <span>2、实名认证需要先准备号身份证 </span>
        <span>3、认证后才能正常购买流量使用SIM卡 </span>
      </div>
    </div>
    <div style="padding: 0 20px" v-if="cardList.length===0" >
      <van-button type="warning" style="width: 100%" @click="goToSim">立即添加SIM卡</van-button>
    </div>
    <van-dialog
      v-model="showDialog"
      title="提示" :showConfirmButton="false">
      <div class="tips dialog-tips">
        <span>已复制ICCID号，请准备好身份证</span>
        <span>即将前往电信实名({{count}}s)</span>
      </div>
    </van-dialog>
  </div>
</template>

<script>
  import {RadioGroup, Radio,Cell,Empty} from 'vant';
  import {getUnrealNameCard, modifyRealNameStatus} from "../../api/user";
  import {urlSearch} from "../../utils";

  export default {
    name: "index",
    components: {RadioGroup, Radio,Cell,Empty},
    data(){
      return{
        iccid:urlSearch('iccid')||'',
        cardList:[],
        showDialog:false,
        count:3,
        intervalId:null
      }
    },
    mounted() {
      this.getList()
    },
    methods:{
      async getList(){
        const res  = await getUnrealNameCard()
        this.cardList = res.data.map(item=>{
          return {
            iccid:item.iccid
          }
        })
      },
      goToSim(){
        this.$router.push('/sim/add')
      },
      async goOut() {
        this.showDialog = true
        // todo 复制当前卡号
        this.$copyText(this.iccid)
        await modifyRealNameStatus({
          sim:this.iccid,
          simType:'ICCID'
        })
        this.intervalId = setInterval( ()=> {
          if(this.count>0){
            this.count = this.count -1
          }else{
            // todo 跳到电信认证页
            clearInterval(this.intervalId)
            location.href='http://uniteapp.ctwing.cn:9090/uapp/certifhtml/certif_entry.html?userCode=r/s9Tc00hjiKcR13MIjZHg==&passWord=9u8VuY1xbez6r6k/BBnLlw==&phone=&accessNbr=&tmstemp=1590559861929'
          }

        },1000)
      }
    },
  }
</script>

<style scoped>
  .tips{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    color: #969799;
  }
  .dialog-tips{
    font-size: 14px;
    color: #969799;
    padding: 0 20px 30px;
    text-align: center;
  }
</style>
